<template>
	<view class="cashCoupon">
		<view class="my__coupon">
			<block v-if="coupon.length > 0">
				<view class="securities" v-for="(item, index) of coupon" :key="index" v-if="compId ? item.comp_ids == compId : true">
					<view @tap="submitInfo(item)">
						<view class="coupon kfbt">
							<view class="coupon_logo box">
								<view class="img_nav" :style="[{ background: 'url('+item.image_url+') no-repeat', 'background-size': '100% 100%' }]"></view>
							</view>
							<view class="coupon__r">
								<view class="coupon__content">
									<view class="coupon__price" v-if="item.coupon_type == 'CASH'">
										<template v-if="item.plantype == 'D'">
											￥
											<text>{{item.price}}</text>
											<view class="orprice">原价：{{item.amount}}元</view>
										</template>
										<template v-else>
											￥
											<text>{{item.amount}}</text>
										</template>
									</view>
									<view class="coupon__discount" v-else-if="item.coupon_type == 'DISCOUNT'">
										<text>{{item.rebate}}</text>折
									</view>
									<view class="mydesc flex">
										<view class="coupon__tit">{{item.act_name || ''}}</view>
										<view class="coupon__sub">{{item.explain != null ? item.explain : '1'}}</view>
									</view>
								</view>
								<view class="coupon_term" v-if="item.time_limit_type == 'custom'">{{item.time_show}}</view>
								<view class="coupon_term" v-else>有效期：{{item.startdate}} 至 {{item.enddate}}</view>
							</view>
							<view class="coupon_abs">
								<!-- <button class="kfbt mybtn coupon_btn" v-if="{{item.vip_status === 'RD' && plantype=='P8'}}">立即使用</button> -->
								<button class="kfbt mybtn pastTime li used_btn" v-if="item.status === 'ED'">已被抢完</button>
								<button class="kfbt mybtn pastTime li used_btn" v-else-if="item.status === 'NS'">即将开抢</button>
								<button class="kfbt mybtn coupon_btn" v-else>
									<view class="price vbi box" v-if="item.plantype=='D'">
										<block v-if="item.price">
											<text>积</text>
											<text>分</text>
											<text>&</text>
											<text>现</text>
											<text>金</text>
										</block>
										<block v-else>
											免费领取
										</block>
									</view>
									<view class="price box box-pack-center box-align-center" v-else>
										<block v-if="item.price">
											<text>{{item.price}}</text>
											<image src="/static/images/icon_nonedou.png"></image>
											<text>兑</text>
											<text>换</text>
										</block>
										<block v-else>
											免费
										</block>
									</view>
								</button>
							</view>
						</view>
					</view>
					<!-- 券描述 -->
					<view class="coupon_bottom" v-if="item.instruction">
						<view class="coupon_nav" @tap='handlecouponDetail(item.id, item.instruction)'>
							<view :class="['con', 'box', 'box-align-start',dat_develop == item.id ? 'active' : '']">
								<view class="txt">{{item.instruction}}</view>
								<view :class="['myarrow', dat_develop == item.id ? 'active' : '']"></view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view class="undata" v-else>
				暂无相关优惠券
			</view>
		</view>
		<get-phone :phoneToggle="phoneToggle" @setToggle="setToggle"></get-phone>
		<v-insufficient :shareToggle="shareToggle"></v-insufficient>
	</view>
</template>

<script>
	import helper from "../../common/helper.js"
	
	import getPhone from "../iframe/getPhone"
	import vInsufficient from "../iframe/vInsufficient"
	import bus from '../../common/bus';
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				// 验证手机号码弹窗
				phoneToggle: false,
				// 券描述展开的couponid
				dat_develop: -1,
				// 是否允许被点击
				loaded: false,
				// v豆不足，需弹分享
				shareToggle: false
			}
		},
		components: {
			getPhone,
			vInsufficient
		},
		props: [
			'coupon',
			'compId'
		],
		computed: {
			...mapState({
				userinfo: state => state.info.userinfo
			})
		},
		created(){
			bus.$on('closeShare', msg => {
        this.shareToggle = msg;
      })
		},
		onHide() {
			this.loaded = false
		},
		methods: {
			...mapActions([
				"info_seclect"
			]),
			handlecouponDetail (couponid, instruction) {
				// 字数没超过一行,不下拉
				if (helper.getStrlen(instruction) <= 50) return false;
				this.dat_develop = this.dat_develop != couponid ? couponid : -1
			},
			submitInfo (e) {
				if (this.loaded) return false;
				this.loaded = true
				if (e.status == 'ED' || e.status == 'NS') return false;
				// 未注册时弹出授权页面
				if (!uni.getStorageSync('is_vip')) this.phoneToggle = true
				let assets = parseInt(e.price - this.userinfo.user_assets.v_point)
				if (e.plantype === 'P' && assets > 0) {
					this.shareToggle = true
					this.loaded = false
				} else {
					uni.navigateTo({
						url: '/pages/coupon/exchange?actid=' + e.id + '&plantype=' + e.plantype,
					})
					this.loaded = false
				}
			},
			setToggle (val) {
				this.phoneToggle = val
			}
		},
	}
</script>

<style lang="scss">
	@import "../../assets/styles/couponlist.scss";
</style>
